<template>
	<view style="margin: 4px;background-color: #fff;">

		<uni-list-item @click.native="$refs.popup.open('center')" showArrow title="提现支付宝" :rightText="account" />

		<uni-collapse>
			<uni-collapse-item title="提现记录" :open="true" title-border="show">
				<table style="width: 100%;">
					<template v-for="(item,index) in extractList">
						<tr>
							<td style="text-align: center;">{{item.extractId}}</td>
							<td>
								<span>
									{{item.alipayName}}
								</span>
								<span style="color: red;font-size: 16px;margin-left: 6px;">
									+{{zeroTwo(item.amount)}}
								</span>
							</td>
						</tr>
						<tr>
							<td>{{item.updateTime }}</td>
							<td style="text-align: center;">{{item.status+(item.remark==null?'':item.remark)}}</td>
						</tr>
						<tr style="background-color: aliceblue;">
							<td colspan="2" />
						</tr>
					</template>
				</table>
			</uni-collapse-item>
		</uni-collapse>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup" borderRadius="10px">
			<view id="pop">
				<uni-group title="设置提现支付宝" mode="card">
					<view style="font-size: 20rpx; margin: 12rpx;color: red;">姓名和账号必须保持一致，且经过本人实名认证，注意不要填错，错误的信息会导致打款失败
					</view>
					<uni-forms ref="formData" :modelValue="formData" :rules="rules" validate-trigger="bind">
						<uni-forms-item label="收款人姓名" name="alipayName" label-width="160" label-align="center">
							<uni-easyinput type="text" v-model="formData.alipayName" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="支付宝账号" name="alipayAccount" label-width="160" label-align="center">
							<uni-easyinput type="text" v-model="formData.alipayAccount" placeholder="请输入账号" />
						</uni-forms-item>
						<uni-forms-item label="短信验证码" name="code" label-width="160" label-align="center">
							<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码"
								style="width: 55%;display: inline-block;" />
							<uni-tag @click="sendCode()" :text="codeText" type="primary" />
						</uni-forms-item>
					</uni-forms>
					<view style="font-size: 11px; text-align: center; margin-bottom: 10px;">
						验证码接收手机号为注册账号（{{$store.state.user.name}}）</view>
					<view style="text-align: center">
						<button @click="$refs.popup.close()" style="margin-right: 10rpx; width: 40%"
							size="mini">取消</button>
						<button @click="updateInfo()" style="width: 40%" type="warn" size="mini">提交</button>
					</view>
				</uni-group>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sendVerifyCode
	} from '@/api/login'
	import {
		extractList,
		payMentAccount,
		setPayMentAccount
	} from "@/api/my"
	export default {

		data() {
			return {
				alipayName: undefined,
				formData: {
					alipayName: undefined,
					alipayAccount: undefined,
					code: undefined
				},

				rules: {
					alipayName: {
						rules: [{
							required: true,
							errorMessage: '请填写收款人姓名',
						}]
					},
					alipayAccount: {
						rules: [{
							required: true,
							errorMessage: '请填写支付宝账号',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请填写验证码'
						}]
					}
				},
				seconds: 0,
				codeText: "发送验证码",
				extractList: []
			}
		},
		computed: {
			account() {
				return this.formData.alipayAccount ? this.formData.alipayAccount : '未设置'
			}
		},
		onLoad() {
			this.getInfo()
			extractList().then(res => {
				this.extractList = res.data
			})
		},
		methods: {
			getInfo() {
				payMentAccount().then(res => {
					if (res.code == 200) {
						let data = res.data
						this.formData.alipayAccount = data.alipayAccount
						this.formData.alipayName = data.alipayName
					}
				})
			},

			sendCode() {
				// 启动倒计时
				if (this.seconds > 0) {
					return
				}
				sendVerifyCode(this.$store.state.user.name).then(res => {
					if (res.code == 200) {
						this.seconds = 59
						let timer = setInterval(() => {
							this.seconds--;
							this.codeText = "重新获取(" + this.seconds + ")"
							if (this.seconds <= 0) {
								this.codeText = "发送验证码"
								clearInterval(timer)
							}
						}, 1000)
					} else {
						this.$message({
							message: res.msg,
							center: true
						});
					}
				})
			},

			updateInfo() {
				this.$refs.formData.validate().then(res => {
					setPayMentAccount(this.formData).then(res => {
						if (res.code == 200) {
							this.getInfo()
							this.formData.code = null
							this.$refs.popup.close()
							this.$modal.showToast('提交成功')
						}
					})
				}).catch(err => {
					console.error('表单错误信息：', err)
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	#pop {
		width: 680rpx;
		padding: 40rpx 20rpx
	}

	td {
		width: 50%;
		padding: 3px 0;
		text-align: center;
	}

	.uni-forms-item[data-v-61dfc0d0] {
		position: relative;
		display: flex;
		margin-bottom: 16px;
		flex-direction: row;
	}
</style>